<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<div class="layui-container" style="width: 700px;height: 600px;margin-top: 0px;padding-top: 60px;">

    <div style="margin-left: 460px; width: 600px;">&nbsp;
        <button class="layui-btn layui-btn-warm layui-btn-radius">退出</button></a>
        <a href="/menu/findTypes">&nbsp;&nbsp;&nbsp;
            <button class="layui-btn layui-btn-normal layui-btn-radius">添加</button></a>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script>
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test'
                ,url:'/menu/findAll'
                ,title: '菜单列表'
                ,cols: [
                    [
                        {field:'id', width:100, title: '编号', sort: true}
                        ,{field:'name', width:100, title: '菜品'}
                        ,{field:'price', width:100, title: '单价'}
                        ,{field:'flavor', width:100, title: '口味'}
                    //     ,{field:'tid',width:100,  title: '分类',templet:function(data){
                    //         return "三鲜"
                    //     }
                    // }
                        ,{field:'type',width:100,  title: '分类',templet:(data)=>{
                            return data.type.name
                        }}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
                    ]
                ]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                let data=obj.data
                // console.log(obj)
                if(obj.event === 'edit'){
                   location.href="/menu/findById/"+data.id
                }else{
                    //消息确认框
                layer.confirm("确定要删除吗?",(index)=>{
                   location.href="/menu/deleteById/" +data.id
                    layer.close(admin_manage)
                })
                }
            });
        });
    </script>

</div>
</body>
</html>